<template>
  <view class="img" :style="{ 'border-radius': borderRaduis }">
    <view class="loadding" v-if="isLoad">
      <view class="loading-icon" :style="{ width: loadWidth, height: loadWidth }"></view>
    </view>
    <image :src="imgSrc" :mode="mode" @load="loadEvent" @error="errorEvent" lazy-load v-if="isShow" class="contentImg"></image>
    <view class="errImg flex flex-direction align-center justify-center" v-if="!isLoad && !isShow">
      <block v-if="!isGrowth">
        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
        <text class="errContent" :style="{ background: 'url(' + errorImg + ') no-repeat center/cover', width: w, height: w }"></text>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <image :src="errorImg" class="errContent" :style="{ width: w, height: w }" mode="aspectFill"></image>
        <!-- #endif -->
        <text class="text margin-top-xs" v-if="num > 60">{{ $t('加载失败') }}</text>
      </block>
      <block v-if="isGrowth">
        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
        <text class="errContent" :style="{ background: 'url(' + errorImg + ') no-repeat center/cover', width: '100%', height: '100%' }"></text>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <image :src="errorImg" class="errContent" :style="{ width: '100%', height: '100%' }" mode="aspectFill"></image>
        <!-- #endif -->
      </block>
    </view>
  </view>
</template>

<script>
export default {
  name: 'fu-image',
  props: {
    // 图片链接
    src: {
      type: String,
      default: '',
    },
    // 图片mode属性
    mode: {
      type: String,
      default: 'aspectFill',
    },
    radius: {
      type: [Number, String],
      default: 0,
    },
    errorImg: {
      type: String,
      default:
        '',
    },
    isGrowth: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isShow: true, //图片显示
      isLoad: true, //loading加载
      imgHeight: '100%', //图片高度
      num: 0,
    }
  },
  computed: {
    w() {
      let _w = Math.floor(this.num * 0.4) > 50 ? 50 : Math.floor(this.num * 0.4)
      return _w + 'px'
    },
    loadWidth() {
      let _w = Math.floor(this.num * 0.7)
      // console.log(_w)
      return _w + 'px'
    },
    borderRaduis() {
      return this.getUnitValue(this.radius)
    },
    imgSrc() {
      return this.src
    },
  },
  watch: {
    src: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.isLoad = false
          this.isShow = false
        } else {
          this.isLoad = true
          this.isShow = true
        }
      },
      immediate: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(function () {
        let w
        const query = uni.createSelectorQuery().in(this)
        query
          .select('.img')
          .boundingClientRect((data) => {
            let num = data.width > data.height ? data.height : data.width
            this.num = num
          })
          .exec()
      })
    }, 10)
  },
  methods: {
    // 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
    getUnitValue(val) {
      if (/(%|px|rpx|auto)$/.test(val)) return val
      else return val + 'rpx'
    },
    // 图片加载成功事件
    loadEvent(e) {
      // console.log('ok',e);
      this.isLoad = false
      this.isShow = true
    },
    // 图片加载失败事件
    errorEvent(e) {
      // console.log('error',e);
      this.isLoad = false
      this.isShow = false
    },
  },
}
</script>

<style scoped lang="scss">
.img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .contentImg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.errImg {
  background: #f4f4f4;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #999999;
  width: 100%;
  height: 100%;
  font-size: 24rpx;
  .errContent {
    // width: 30%;
    // height: 30%;
    // background: url(./static/error.png) no-repeat center/cover;
  }
  .text {
    // transform: scale(0.7);
  }
}
.loadding {
  background: #f4f4f4;
  width: 100%;
  height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  position: relative;
}
.loadImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.loading-icon {
  background: url(static/logo.png) no-repeat center/cover;
  border-radius: 50%;
  width: 40%;
  height: 40%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  //animation: a 1s steps(12) infinite;
}
@-webkit-keyframes a {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes a {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
